<template>
    <div class="invoices-administration">
        <div class="noworder-title">
            <span>发票管理</span>
        </div>
        <div class="form-box">
            <div class="search-box">
                <el-select v-model="searchObj.statusSelected" @change="handleChangeStatus" size="small" placeholder="请选择状态搜索">
                    <el-option
                            v-for="item in searchObj.statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                        size="small"
                        filterable
                        remote
                        reserve-keyword
                        @change="handleChangeUserName"
                        v-model="searchObj.userName"
                        placeholder="请输入用户名搜索"
                        :loading="searchObj.loading"
                        :remote-method="remoteMethod"
                        style="width: 260px;margin:0 10px">
                    <el-option
                            v-for="item in searchObj.userOption"
                            :key="item.id"
                            :label="item.name + ' ' + item.phone"
                            :value="item.id">
                    </el-option>
                </el-select>
                <!--<el-button type="primary" @click="searchData" icon="el-icon-search"  size="small">搜索</el-button>-->
                <el-button type="primary" @click="reset"  size="small">重置</el-button>
            </div>
            <div v-loading="loading">
                <invoices-table @successChange="successChange" :tableData="dataObj.tableData"></invoices-table>
                <div class="pagination-box">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="dataObj.currentPage"
                            :page-sizes="[10, 20, 40, 60, 80]"
                            :page-size="dataObj.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="dataObj.total">
                    </el-pagination>
                </div>
            </div>


        </div>
    </div>
</template>
<script>
    import invoicesTable from './invoicesTable/Table';
    export default {
        components: {
            invoicesTable
        },
        data() {
            return {
                loading: false,
                searchObj: {
                    statusSelected: '',
                    statusOptions: [
                        // {
                        //     value: '-5',
                        //     label: '审核未通过'
                        // },
                        {
                            value: '1',
                            label: '待审核'
                        },
                        // {
                        //     value: '5',
                        //     label: '已审核'
                        // },
                        {
                            value: '10',
                            label: '审核已开出'
                        }
                    ],
                    loading:false,
                    userName:'',
                    userOption: []
                },
                dataObj: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    tableData: [],
                    invoiceApi: 'money/invoice',
                }
            }
        },
        computed: {
            dataRefreshDialog() {
                return this.$store.state.num;
            },
        },
        watch: {
            dataRefreshDialog: function(newValue) {
                this.getStatisticsData();
            }
        },
        mounted() {
            this.getUserList('');
            this.getStatisticsData();
        },
        methods: {
            handleChangeStatus(val) {
                this.getStatisticsData();
            },
            handleChangeUserName(val) {
                this.getStatisticsData();
            },
            reset(){
                this.searchObj.statusSelected = '';
                this.searchObj.userName = '';
                this.getStatisticsData();
            },
            successChange() {
                this.getStatisticsData();
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.searchObj.loading = true;
                    setTimeout(() => {
                        this.getUserList(query);
                    }, 200);
                } else {
                    this.searchObj.userOption = [];
                }
            },
            getUserList(val) {
                let query={};
                if (!val) {
                    query={};
                } else {
                    query['name|phone$'] = '%' + val + '%';
                }
                this.searchObj.userOption = [];
                this.$http.get(this.$larfree.httpQuery(query, 'common/user'))
                    .then((response) => {
                        this.searchObj.loading = false;
                        response.data.data.forEach(item=>{
                            this.searchObj.userOption.push(item);
                        })
                    })
                    .catch((error) => {
                        this.searchObj.loading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            handleSizeChange(val) {
                this.dataObj.pageSize = val;
                this.getStatisticsData();
            },
            handleCurrentChange(val) {
                this.dataObj.currentPage = val;
                this.getStatisticsData();
            },
            searchData() {
                this.getStatisticsData();
            },
            getStatisticsData() {  // 获取统计数据
                this.loading = true;
                let query = {};
                query['pageSize'] = this.dataObj.pageSize * 1;
                query['page'] = this.dataObj.currentPage;
                if (this.searchObj.userName !== '') {
                    query['user_id'] = this.searchObj.userName;
                }
                if (this.searchObj.statusSelected !== '') {
                    query['status'] = this.searchObj.statusSelected;
                }
                this.$http.get(this.$larfree.httpQuery(query, this.dataObj.invoiceApi))
                    .then((response) => {
                        this.dataObj.tableData = response.data.data;
                        this.dataObj.total = response.data.meta.total;
                        this.loading = false;
                    })
                    .catch((error) => {
                        this.loading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }

        }
    }
</script>
<style lang="less">
    .invoices-administration{
        margin: 10px 0 0 10px;
        .el-upload-list--picture-card .el-upload-list__item{
            width: 100px;
            height: 100px;
        }
        .el-upload--picture-card{
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
        .el-table__expanded-cell[class*=cell]{
            padding: 0px;
        }
        .noworder-title{
            font-size:16px;
            height: 42px;
            line-height: 42px;
            background-color: #fff;
            border-bottom: 2px solid #FAFAFA;
            color:rgba(0,0,0,0.85);
            padding-left: 16px;
        }
        .form-box{
            background-color: #fff;
            padding: 10px;
            .search-box{
                padding: 10px 0 20px 0;
            }
            .expand-box{
                background-color:#f8f8f9;
                padding: 20px 50px;
                font-size: 15px;
                .title{
                    font-weight: 600;
                    color: #000;
                }
            }
            .pagination-box{
                text-align: right;
                padding:20px 0;
            }
        }

    }
</style>

